<template>
	<div v-loading="loading">
		<input type="file" @change="handleFileUpload" />
		<el-table :data="tableData" style="width: 100%">
			<el-table-column v-for="item in columns" :key="item.key" :prop="item.key" :label="item.key" width="180" />
			<!-- <el-table-column prop="所选风险套餐" label="所选风险套餐" width="180" />
			<el-table-column prop="选项" label="选项" /> -->
		</el-table>
		<Table :columns="columns" :data="tableData"></Table>
	</div>
</template>

<script setup>
import * as XLSX from 'xlsx';
import { ref } from 'vue';

const tableData = ref([])
const columns =ref([])
const handleFileUpload = async (event) => {
	const file = event.target.files[0];
	const reader = new FileReader(); // 创建FileReader实例
	// 根据需要选择读取方法，这里以读取文件为ArrayBuffer
	reader.readAsArrayBuffer(file);
	reader.onload = async (e) =>{
		// 当读取操作完成时, e.target.result 将包含文件的流（ArrayBuffer或者其他类型取决于读取方式）
		const stream = e.target.result;
		// 处理流.
		const workbook = await XLSX.read(await stream, { type: 'array' });
		const worksheet = workbook.Sheets[workbook.SheetNames[0]];
		const data = XLSX.utils.sheet_to_json(worksheet);
		// 在这里处理读取到的数据,例如显示在表格中
		console.log(data);
		columns.value = [];
		const target = data[0];
		for (let key in target) {
			columns.value.push({
				title: key,
				key
			})
		}
		tableData.value = data;
	};
}
</script>
<style scoped></style>